<template>
	<view class="my-card-centent">
		<yk-header :title="title" @headBtn="headBtn()" @closePage="closePage()"></yk-header>
		<view class="card-kind-tab">
			<view class="swiper"><view :class="[status==1?'active':'']"></view></view>
			<view class="tab-box" >
				<view :class="[status==0?'active':'']" :data-status='0' @click="tabStatus($event)">未激活</view>
				<view :class="[status==1?'active':'']" :data-status='1' @click="tabStatus($event)">已激活</view>
			</view>
		</view>
		<view class="card-List">
			<view class="card-box"
				v-for="(gift, index) in GiftcardList"
				:key="index"
			>
				<view class="card-box-money">
					<view>{{gift.cardNumber}}</view>
					<view>面值 {{gift.parValue}}元</view>
				</view>
				<view>
					<view v-if="status==1" :data-phone='gift.salePhone' @click="tellPhone($event)">
						<image v-if="status==1&&gift.customerPhone" src="../../static/img/zhanye/icon-shoujihao.png"></image>
						<text v-if="status==1">{{gift.customerPhone?gift.customerPhone:"客户已被他人绑定"}}</text>
					</view>
					<view style="color: #aaa;">{{status==0?"绑定":"激活"}}时间 {{gift.createTime}}</view>
					<view v-if='status==0' :data-cardnum='gift.cardNumber' class="release-bind" @click="releaseBind($event)" >解绑</view>
				</view>
			</view>
			
		</view>
		
		<view class="loading-text" v-if="GiftcardList.length>10||GiftcardList.length<1||loadingText=='没有更多了'">{{ loadingText }}</view>
	</view>
</template>
 
<script>
	let page = 1,
		limit = 10;
	export default {
		onLoad(event) {
			page = 1;
			limit = 10;
			this.GiftcardList = [];
			this.loadingText = '加载中...';
			this.getGiftcardList();
		},
		onShow() {
			
		},
		data() {
			return {
				GiftcardList: [],
				loadingText: '加载中...',
				status:0,
				title:'优惠卡'
			};
		},
		onReachBottom: function() {
			this.getGiftcardList();
		},
		onPullDownRefresh: function() {
			page = 1;
			limit = 10;
			this.GiftcardList = [];
			this.loadingText = '加载中...';
			this.getGiftcardList();
		},
		methods: {
			//顶部功能键
			headBtn(e){
				let that=this;
				uni.showActionSheet({
					itemList: ['刷新', '清除缓存'],
					success: function (res) {
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						if(res.tapIndex==0){
							//刷新
							page = 1;
							limit = 10;
							that.GiftcardList = [];
							that.loadingText = '加载中...';
							that.getGiftcardList();
						}else{
							//清楚缓存
							// callNative('onClearH5Cache')
							uni.showToast({
								title: '清除缓存成功'
							});
						}
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});
			},
			//关闭当前页面
			closePage(){
				callNative('navigateBack') 
			},
			//解除绑定
			releaseBind(e){
				console.log(e.currentTarget.dataset.cardnum);
				let that=this;
				try {
					uni.showModal({
						title: '提示',
						content: '您确定要解除绑定吗？',
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.request({
									url: that.$usereq + '/coupon-expand/promote/bind/unbound',
									method: 'POST',
									header: {
										'blade-auth': decodeURI(uni.getStorageSync('token')),
										'content-type': 'application/x-www-form-urlencoded'
									},
									data: {
										cardNum:e.currentTarget.dataset.cardnum
									},
									success: res => {
										let datas = res.data;
										console.log(datas);
										
										if(datas.code==200){
											uni.showToast({
												title: '解绑成功',
												icon:'success',
												duration: 2000
											});
											page = 1;
											limit = 10;
											that.GiftcardList = [];
											that.loadingText = '加载中...';
											that.getGiftcardList();
										}else{
											uni.showToast({
												icon:'none', 
												title: datas.msg,
												duration: 2000
											});
										}
										uni.stopPullDownRefresh();
									}
								});
								
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					// console.log('getbindcardList === ' + uni.getStorageSync('token'));
					
				} catch (e) {
					uni.hideLoading();
					console.log(e.message);
				}
			},
			//
			tellPhone(e){
				// console.log(e);
				uni.makePhoneCall({
					phoneNumber: e.currentTarget.dataset.phone    //仅为示例
				});
			},
			goBack(){
				h5NavigateBack({
					delta: 1
				});
			},
			gobind(e){
				console.log(e.currentTarget.dataset.id);
				h5RedirectTo ({
					url: 'bindgift?id='+e.currentTarget.dataset.id+'&name='+e.currentTarget.dataset.name
				});
			},
			tabStatus(e){
				this.status=e.currentTarget.dataset.status;
				page = 1;
				limit = 10;
				this.GiftcardList = [];
				this.loadingText = '加载中...';
				this.getGiftcardList();
			},
			getGiftcardList() {
				try {
					// console.log('getbindcardList === ' + uni.getStorageSync('token'));
					uni.request({
						url: this.$usereq + '/coupon-expand/promote/bind/gift/card',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')),
							'content-type': 'application/json'
						},
						data: {
							page: page,
							limit: limit,
							cardStatus:this.status
						},
						success: res => {
							let datas = res.data;
							console.log(datas);
							let newList = datas.data;
							if (newList != null && newList != '' && newList.length > 0) {
								this.GiftcardList = this.GiftcardList.concat(newList);
								page++;
								if (newList.length <= 9) {
									this.loadingText = '没有更多了';
								}
							} else {
								this.loadingText = '没有更多了';
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了';
					console.log(e.message);
				}
			}
		}
	};
</script>

<style lang="scss">
	page{
		background: #fff;
		font-size: 30px;
	}
	.my-card-centent{
		width: 100%;
		min-width: 750px;
		margin-top: 30px;
		.card-kind-tab{
			width: 500px;
			height: 70px;
			position: relative;
			margin: 0 auto;
			margin-top: 20px;
			border-radius: 70px;
			border: 1px solid #0096FF;
			.swiper>view{
				width: 250px;
				background: #0096FF;
				height: 68px;
				border-radius: 68px;
				margin-top: 1px;
				transition: all 0.5s;
			}
			.swiper>view.active{
				margin-left: 250px;
			}
			.tab-box{
				width: 500px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				position: absolute;
				height: 68px;
				line-height: 68px;
				top: 0;
				view{
					width: 50%;
					text-align: center;
					color: #0096FF;
				}
				view.active{
					color: #fff;
				}
			}
		}
	}
	.card-List{
		width: 710px;
		min-height: 150px;
		margin: 0 auto;
		margin-top: 40px;
		.card-box{
			width:100%;
			background:rgba(242,250,255,1);
			border-radius:10px;
			margin-bottom: 20px;
			view{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items:center ;
				padding: 0 16px;
				box-sizing: border-box;
				image{
					width: 28px;
					height: 28px;
					margin-right: 6px;
				}
			}
			.card-box-money{
				line-height: 80px;
				border-bottom: 1px solid #D5EFFF;
			}
			view:nth-child(2){
				line-height: 70px;
				font-size: 28px;
				view:nth-child(1){
					font-size: 24px;
					color: #0096FF;
				}
				view:nth-child(2){
					
					font-size: 24px;
					color: #AAAAAA;
				}
				.release-bind{
					width: 128px;
					height: 54px;
					color: #0096FF !important;
					justify-content: center;
					border-radius: 54px;
					text-align:center;
					border:1px solid #0096FF;
				}
			}
		}
	}
	.loading-text {
		// width: 700px;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		line-height: 60px;
		color: #979797;
		font-size: 24px;
	}
</style>
